<template>
    <uni-list :border="false" class="songlist">
      <uni-list-item @click="gotoPlay(index)" clickable v-for="item,index in list" :key="index">
       <template v-slot:body>
          <view class="item" v-if="item.name">
            <view class="left">
              <view class="title">
                {{item.name}}
              </view>
              <view class="singer">
                {{item.ar[0].name}}
              </view>
              <view class="Original" v-if="item.originSongSimpleData">
                {{item.originSongSimpleData.artists[0].name}}
              </view>
            </view>
          </view>
        </template>
        <template v-slot:footer>
          <view class="more">
            <uni-icons size="24" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
          </view>
        </template>
      </uni-list-item>
    </uni-list>
      <uni-load-more :status="status"></uni-load-more>
  <view>

  </view>
</template>
<script setup>
  import {
    ref
  } from "vue";
  import { audio } from '@/utils/audio.js'
  const props = defineProps({
    list:{
      type:Array,
      default:()=>[]
    },
    status:{
      type:String,
      default:'more'
    }
  })
  // 跳转播放
const gotoPlay = (index) =>{
  // 判断是否可用
  const obj = {
    index,
    songDetail:props.list
  }
  uni.navigateTo({
    url:'/pages/play/play?item='+encodeURIComponent(JSON.stringify(obj)),
    success() {
      if(!audio.autoplay){
        audio.autoplay = true
      }
    }
  })
}
</script>
<style lang="less">
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 15rpx;
    // border-bottom: 1px solid #efefef;
    // padding: 15rpx 0;

    .left {
      .title {
        width: 580rpx;
        font-size: 30rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .singer {
        color: #666666;
        font-size: 24rpx;
      }

      .Original {
        font-size: 24rpx;
        color: #666666;
      }
    }
  }
</style>
